<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        ul li {
            margin: 20px 20px;
            padding: 10px 5px;
        }

        ul li.active {
            background-color: #66ffff;
        }
    </style>
</head>
<body>
<div id="app">
    <audio :src="getCurrentSongSrc" autoplay controls></audio>
    <ul>
        <li v-for="(item,index) in musicData" @click="clickHandler(index)" :class="{active:currentIndex==index }">
            <h2>{{item.id}}-歌名:{{item.name}}</h2>
            <p>歌手:{{item.author}}</p>
        </li>
    </ul>
</div>
<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
    var musicData = [
        {id: 1, name: '陈奕迅-好久不见', author: '陈奕迅', songSrc: '../static/陈奕迅 - 好久不见.mp3'},
        {id: 2, name: '陈奕迅-淘汰', author: '陈奕迅', songSrc: '../static/陈奕迅 - 淘汰.mp3'},
        {id: 3, name: '陈奕迅-阴天快乐', author: '陈奕迅', songSrc: '../static/陈奕迅 - 阴天快乐.mp3'}
    ]
    new Vue({
        el: "#app",
        data() {
            return {
                musicData: musicData,
                currentIndex: 0
            }
        }, computed: {
            //计算属性只有getter
            //setter也可以设置
            getCurrentSongSrc: function () {
                return this.musicData[this.currentIndex].songSrc
            }
        }, methods: {
            clickHandler(index) {
                this.currentIndex = index;
            }
        }
    })
</script>
</body>
</html>
